import React from 'react';
import { defaultSettings } from '../../settings';
import { useStore } from '../../utils/hooks';
import './index.css';
import Element from './Element';

const Sidebar = (props) => {
  const { userProps = {} } = useStore();
  const { settings } = userProps;
  const sideBarSettings = Array.isArray(settings) ? settings : defaultSettings;

  return (
    <div className="left-layout w5-l w4">
      {sideBarSettings.map((item, idx) => {
        // 控制是否展示
        if (item && item.show === false) {
          return null;
        }

        return (
          <div key={idx}>
            <p className="f6 b">{item.title}</p>
            <ul className="pl0">
              {Array.isArray(item.widgets) &&
                item.widgets.map((widget, idx) => {
                  return (
                    <Element key={idx.toString()} {...props} {...widget} />
                  );
                })}
            </ul>
          </div>
        );
      })}
    </div>
  );
};
export default Sidebar;
